<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:spark="http://primefaces.org/spark">
    <h:form>
        <spark:menu>
            <p:submenu label="#{msgs['menu.layout_features']}" icon="fa fa-paint-brush">
                <p:menuitem value="#{msgs['menu.promotion_page']}" icon="fa fa-laptop" outcome="/promotion-page.xhtml"/>
                <p:menuitem value="#{msgs['menu.green']}" icon="fa fa-paint-brush green" actionListener="#{themeView.setTheme('spark')}" immediate="true" ajax="false"/>
                <p:menuitem value="#{msgs['menu.blue']}" icon="fa fa-paint-brush blue" actionListener="#{themeView.setTheme('spark-blue')}" immediate="true" ajax="false"/>
                <p:menuitem value="#{msgs['menu.orange']}" icon="fa fa-paint-brush orange" actionListener="#{themeView.setTheme('spark-orange')}" immediate="true" ajax="false"/>
                <p:menuitem value="#{msgs['menu.red']}" icon="fa fa-paint-brush red" actionListener="#{themeView.setTheme('spark-red')}" immediate="true" ajax="false"/>
            </p:submenu>

            <p:separator/>

            <p:submenu label="#{msgs['menu.spark_theme']}" icon="fa fa-rocket">
                <p:menuitem value="#{msgs['menu.sample']}" outcome="/sample.xhtml" icon="fa fa-columns" />
                <p:menuitem value="#{msgs['menu.forms']}" outcome="/forms.xhtml" icon="fa fa-file-text-o" />
                <p:menuitem value="#{msgs['menu.data_components']}" outcome="/data.xhtml" icon="fa fa-calendar-o" />
                <p:menuitem value="#{msgs['menu.datatable']}" outcome="/datatable.xhtml" icon="fa fa-list-alt" />
                <p:menuitem value="#{msgs['menu.panels']}" outcome="/panel.xhtml" icon="fa fa-columns" />
                <p:menuitem value="#{msgs['menu.overlays']}" outcome="/overlay.xhtml" icon="fa fa-image" />
                <p:menuitem value="#{msgs['menu.menus']}" outcome="/menu.xhtml" icon="fa fa-align-justify" />
                <p:menuitem value="#{msgs['menu.messages']}" outcome="/messages.xhtml" icon="fa fa-comments-o" />
                <p:menuitem value="#{msgs['menu.charts']}" outcome="/charts.xhtml" icon="fa fa-bar-chart" />
                <p:menuitem value="#{msgs['menu.fileupload']}" outcome="/file.xhtml" icon="fa fa-cloud-upload" />
                <p:menuitem value="#{msgs['menu.misc']}" outcome="/misc.xhtml" icon="fa fa-stack-overflow" />
            </p:submenu>

            <p:separator/>

            <p:submenu label="#{msgs['menu.default_pages']}" icon="fa fa-newspaper-o">
                <p:menuitem value="#{msgs['menu.empty_page']}" outcome="/empty-page.xhtml" icon="fa fa-plus-square" />
                <p:menuitem value="#{msgs['menu.login_page']}" outcome="/login.xhtml" icon="fa fa-sign-in" />
                <p:menuitem value="#{msgs['menu.error_page']}" outcome="/error.xhtml" icon="fa fa-exclamation-circle" />
                <p:menuitem value="#{msgs['menu.404_page']}" outcome="/404.xhtml" icon="fa fa-times" />
                <p:menuitem value="#{msgs['menu.access_denied_page']}" outcome="/access-denied" icon="fa fa-eye-slash" />
            </p:submenu>

            <p:separator/>

            <p:submenu label="#{msgs['menu.menu_hierarchy']}" icon="fa fa-sitemap">
                <p:submenu label="#{msgs['menu.submenu_1']}" icon="fa fa-folder">
                    <p:submenu label="#{msgs['menu.submenu_1_1']}" icon="fa fa-folder">
                        <p:submenu label="#{msgs['menu.submenu_1_1_1']}" icon="fa fa-folder">
                            <p:menuitem value="#{msgs['menu.link_1']}" url="#" />
                            <p:menuitem value="#{msgs['menu.link_2']}" url="#" />
                            <p:menuitem value="#{msgs['menu.link_3']}" url="#" />
                        </p:submenu>
                    </p:submenu>
                </p:submenu>
                <p:submenu label="#{msgs['menu.submenu_2']}" icon="fa fa-folder">
                    <p:submenu label="#{msgs['menu.submenu_2_1']}" icon="fa fa-folder">
                        <p:submenu label="#{msgs['menu.submenu_2_1_1']}" icon="fa fa-folder">
                            <p:menuitem value="#{msgs['menu.link_1']}" url="#" />
                            <p:menuitem value="#{msgs['menu.link_2']}" url="#" />
                            <p:menuitem value="#{msgs['menu.link_3']}" url="#" />
                        </p:submenu>
                    </p:submenu>
                </p:submenu>
            </p:submenu>

            <p:separator/>

            <p:submenu label="#{msgs['menu.links']}" icon="fa fa-dropbox">
                <p:menuitem value="#{msgs['menu.documentation']}" outcome="/documentation.xhtml" icon="fa fa-life-ring" />
                <p:menuitem value="#{msgs['menu.font_icons']}" outcome="/font-icons.xhtml" icon="fa fa-paint-brush" />
                <p:menuitem value="#{msgs['menu.user_profile']}" url="#" icon="fa fa-users" />
                <p:menuitem value="#{msgs['menu.tasks']}" url="#" icon="fa fa-history" />
                <p:menuitem value="#{msgs['menu.contact']}" url="#" icon="fa fa-microphone" />
            </p:submenu>

            <f:facet name="options">
                <p:commandButton icon="fa fa-search Fs18 white" styleClass="Fright" type="button"/>
                <p:inputText placeholder="#{msgs['button.search']}" styleClass="Fright"/>
            </f:facet>
        </spark:menu>
    </h:form>
</ui:composition>
